<template>
  <div class="know-wrapper">
    <div class="know">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getList">
        <!-- <el-tab-pane label="故障分类" name="faultType">
          <fault-type ref="faultTypeInstance" />
        </el-tab-pane> -->
        <el-tab-pane label="电子说明书" name="manual">
          <manual ref="manualInstance" />
        </el-tab-pane>
        <el-tab-pane label="在线视频" name="video">
          <on-line-video ref="onLineVideoInstance" />
        </el-tab-pane>
        <el-tab-pane label="故障库" name="fault">
          <fault ref="faultInstance" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import FaultType from '@/components/pages/known/fault/type/index.vue'
  import Manual from './components/Manual/List.vue'
  import OnLineVideo from './components/OnLineVideo/List.vue'
  import Fault from '@/components/pages/known/fault/list/index.vue'
  import { onMounted, ref } from 'vue'
  import routeComponentName from '@/config/route-component-name'
  import { ElTabs, ElTabPane } from 'element-plus'

  defineOptions({
    name: routeComponentName.know.know,
  })

  // 激活标签
  const activeName = ref<'faultType' | 'manual' | 'video' | 'fault'>('manual')

  // 故障分类组件实例
  const faultTypeInstance = ref<InstanceType<typeof FaultType> | null>(null)

  // 说明书组件实例
  const manualInstance = ref<InstanceType<typeof Manual> | null>(null)

  // 在线视频组件实例
  const onLineVideoInstance = ref<InstanceType<typeof OnLineVideo> | null>(null)

  // 故障库组件实例
  const faultInstance = ref<InstanceType<typeof Fault> | null>(null)

  /**
   * 获取列表
   */
  const getList = () => {
    switch (activeName.value) {
      case 'faultType':
        if (faultTypeInstance.value) {
          faultTypeInstance.value.getList()
        }
        break
      case 'fault':
        if (faultInstance.value) {
          faultInstance.value.getFaultTypes()
          faultInstance.value.getList()
        }
        break
      case 'manual':
        if (manualInstance.value) {
          manualInstance.value.getList()
        }
        break
      case 'video':
        if (onLineVideoInstance.value) {
          onLineVideoInstance.value.getList()
        }
        break
    }
  }

  onMounted(() => {
    getList()
  })
</script>

<style scoped lang="scss">
  .know-wrapper {
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .know {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 12px 12px 12px;

      :deep(.el-tabs) {
        height: 100%;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__content {
          flex: 1;
          height: 0;

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }

  .main {
    display: flex;
    flex-direction: column;
    flex: 1;

    .header {
      margin-bottom: 10px;
      margin-top: 10px;

      .btn {
        display: flex;
        align-items: center;
      }

      .mr5 {
        margin-right: 5px;
      }

      .btns {
        .batch {
          display: flex;
          align-items: center;
        }
      }

      .search {
        .input-with {
          width: 150px;
          margin-right: 5px;
        }
      }
    }

    .demo-tabs {
      display: flex;
      flex-direction: column;
      flex: 1;
      :deep(.el-tabs__content) {
        display: flex;
        flex-direction: column;
        flex: 1;
        .el-tab-pane {
          flex: 1;
        }
      }
      :deep(.el-tabs__header) {
        margin-bottom: 0px;
      }
    }

    .table {
      margin-bottom: 10px;
      flex: 1;
      position: relative;
    }

    .type-table,
    .sto-table {
      margin: 10px 0;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .my-header {
    h3 {
      color: #000;
      font-size: 14px;
    }
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }

  .btn_save {
    width: 3.2vw;
  }

  .btn_delete {
    width: 3.2vw;
    color: #ffffff;
  }

  .btn_cancel {
    width: 3.2vw;
  }

  .add-dialog {
    .form-text {
      margin-bottom: 10px;

      .form-item {
        margin-bottom: 18px;
      }

      .item-input {
        width: 250px;
      }

      :deep(.w-e-bar-divider) {
        width: 0;
      }

      .upload-card {
        height: 100px;

        .image-slot {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 100px;
          background: #f5f7fa;
          color: #909399;
          font-size: 24px;
        }
      }
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .add-dialog2 {
    .form-text {
      margin-bottom: 10px;

      .form-item {
        margin-bottom: 20px;

        .item-input {
          width: 250px;
        }

        .upload-card {
          height: 100px;

          .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
          }
        }

        .upload-demo {
          width: 300px;

          :deep(.el-upload-list) {
            max-height: 125px;
            overflow-y: auto;

            .el-upload-list__item {
              margin-top: 0;
              margin-bottom: 10px;
              padding: 0;
              border-radius: 2px;

              .el-upload-list__item-thumbnail {
                display: none;
              }

              &:hover {
                background-color: #f6f8fc;
              }
            }
          }
        }
      }
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .view-dialog {
    .title {
      padding: 0 12px;
      margin-bottom: 15px;

      .name {
        font-size: 14px;
      }

      p {
        font-size: 12px;
        color: #a6a6a6;
      }
    }

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
      font-size: 30px;
    }

    .content {
      display: flex;
      padding: 0 12px;
      margin-top: 15px;

      .left {
        flex-shrink: 0;
        width: 30px;
        margin-right: 10px;
      }

      .text {
        flex: 1;
        max-height: 300px;
        overflow-y: auto;
        height: 100%;
      }
    }
  }

  .view-dialog2 {
    .title {
      padding: 0 12px;
      margin-bottom: 15px;

      .name {
        font-size: 14px;
      }

      p {
        font-size: 12px;
        color: #a6a6a6;
      }
    }

    .content {
      margin: 10px 0;
      height: 300px;
      overflow-y: auto;

      .video-item {
        width: 600px;
        height: 300px;
        margin: 10px 0;
      }
    }
  }

  .el-tag.el-tag--success {
    --el-tag-text-color: #00c0c0;
    --el-tag-bg-color: #ebf6f6;
    --el-tag-border-color: #ebf6f6;
    --el-tag-hover-color: #00c0c0;
  }

  .el-tag.el-tag--info {
    --el-tag-border-color: var(--el-color-info-light-9);
  }

  .el-tag {
    --el-tag-border-color: var(--el-color-primary-light-9);
  }

  .el-tag.el-tag--warning {
    --el-tag-border-color: var(--el-color-warning-light-9);
  }
</style>
